<template>
    <div  class="postPanel">

        <!-- 封面图 -->




        <!-- 修改为路由的标签 -->

            <el-image @click="openblog" :src="blog.bigImgSrc" fit="cover"></el-image>

        <div class="subBlog">
            <h2 @click="openblog" class="title">
                <!-- <a href="">
                    测试测试测试
                </a> -->
                
                <!-- 修改为路由的标签 -->

                  {{ blog.title }}

            </h2>
            <div class="content">
               {{blog.content}}
            </div>

                <ul class="infoBar">
                    <li><span class="fa fa-user-o"></span> <a href="">{{ UserName }}</a></li>
                    <li><span class="fa fa-calendar"></span>{{ blog.createTime }}</li>
                    <li><span class="fa fa-commenting-o"></span> {{ commentNum }}条评论</li>
                </ul>


        </div>
    </div>
</template>

<script>
    export default {
        name: "SingPostPanel",
      mounted() {
        this.getCommentnum()
      },
      props:{
          blog:Object
        },
      data(){return{
        comment:[]
      }},
      methods:{
          getCommentnum(){
            let postData={
              'blogId': this.blog.id
            }
            this.axios.post('http://shilezhi.club:8082/Api/Comment/GetByBlogId',JSON.stringify(postData)).then(
                response=>{
                  this.comment = response.data.commentList
                  // console.log(response.data)
                },
                err=>{

                }
            )
          },
        openblog(){
            this.$router.push({path:'/BlogDetail',query:{blogId:this.blog.id}})
        }
      },
        computed:{
          UserName(){
            return  this.$store.state.AdminName.get(this.blog.userId+'');
          },
          commentNum(){
            return 0
          }


      }
    }
</script>

<style scoped>
.postPanel
{
    padding: 1.25rem 1.25rem 0 1.25rem;
    box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
    /* margin-bottom:1.25rem ; */
    background-color: #f1f3f4;
}
.el-image{
    position: inherit;
    width: 100%;
    height: 15.625rem;
    border-radius: 0.3125rem 0.3125rem 0 0;
    z-index: 0;
    display: block;

}
.el-image:hover{
  cursor: pointer;
}
h2:hover{
  cursor: pointer;
}
.content{
    box-sizing: border-box;
    padding-top: 1.25rem ;
    margin-bottom: 1.25rem;

    overflow: hidden;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}
    .subBlog{
        background-color: #fff;
        border-radius: 0 0 0.3125rem 0.3125rem;
        padding: 1.875rem;
    }
    .infoBar{
        border-top: 0.0625rem rgba(237,241,242,.6) solid;
        padding-top: 0.625rem;
    }
   .infoBar li{
        display: inline-block;
        font-size: 0.8125rem;
        padding-right: 0.625rem;
    }
   .infoBar span{
                padding-right: 0.3125rem;
    }
</style>